<template>
  <div class="page">
    <div class="breadcrumb">
      <span class="bc-item" v-for="(name,i) in breadcrumb" :key="i">{{ name }}</span>
    </div>
    <div class="task-list">
      <van-row :gutter="10">
        <van-col :span="8"></van-col>
        <van-col :span="8">
          <div :class="genCls(4)" @click="gotoCs('4')">小区北侧</div>
        </van-col>
        <van-col :span="8"></van-col>
      </van-row>
      <van-row :gutter="10">
        <van-col :span="8">
          <div :class="genCls(3)" @click="gotoCs('3')">小区西侧</div>
        </van-col>
        <van-col :span="8">
          <div :class="genCls(5)" @click="gotoCs('5')">小区中心</div>
        </van-col>
        <van-col :span="8">
          <div :class="genCls(1)" @click="gotoCs('1')">小区东侧</div>
        </van-col>
      </van-row>
      <van-row :gutter="10">
        <van-col :span="8"></van-col>
        <van-col :span="8">
          <div :class="genCls(2)" @click="gotoCs('2')">小区南侧</div>
        </van-col>
        <van-col :span="8"></van-col>
      </van-row>
      
      <van-row :gutter="10">
        <van-col :span="6"></van-col>
        <van-col :span="12">
          <div v-if="!positionDisable" :class="genCls(6)" @click="gotoCs('6')">地下车库</div>
          <div v-else :class="genCls(6)">地下车库</div>
        </van-col>
        <van-col :span="6"></van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { ywswTaskLIst } from '@/api/publicline/kdcs'

export default {
  data() {
    return {
      breadcrumb: [],
      taskList: [],
      positionDisable: false
    }
  },
  created() {
    const { communityId, breadcrumb, currentLocation } = this.$route.query;
    this.communityId = communityId;
    this.breadcrumb = breadcrumb.split('/');
    this.loadTaskList();
  },
  methods: {
    loadTaskList() {
      ywswTaskLIst( { VILLAGE_ID: this.communityId } )
      .then( res => {
        if ( res.success ) {
          const data = res.result.list;
          this.taskList = data;
        }
      } )
    },
    genCls(i) {
      let cls = "task-item";
      for ( const item of this.taskList ) {
        if ( item.position == i ) {
          if ( i == 6 && item.status === '0' ) {
            this.positionDisable = true;
            cls += " disabled";
          } else if ( item.speedId != null ) {
            cls += " done"
          };
        };
      }
      return cls;
    },
    gotoCs( posi ) {
      let name = "";
      switch(posi) {
        case 'north': name = '小区北侧'; break;
        case 'east': name = '小区东侧'; break;
        case 'south': name = '小区南侧'; break;
        case 'west': name = '小区西侧'; break;
        case 'center': name = '小区中心'; break;
        case 'under': name = '地下停车场'; break;
      }
      let speedId = "";
      for ( const item of this.taskList ) {
        if ( item.position == posi ) {
          speedId = item.speedId;
        };
      }
      this.$router.push( {
        path: "/publicline/kdcs/cs-form",
        query: {
          type: "YWSW",
          posi,
          speedId,
          communityId: this.communityId,
          breadcrumb: this.breadcrumb.concat([name]).join('/')
        }
      } )
    },
  }
}
</script>

<style lang="less" scoped>
.page {
  background: #FFF;
}
.breadcrumb {
  min-height: 20px;
  border-bottom: 1px solid #ccc;
  font-size: 13px;
  padding: 6px 10px;
  background: #f2f9ff;

  .bc-item {
    color: #888;

    &:after {
      content: " / ";
    }

    &:last-child {
      color: #000;

      &:after {
        content: "";
      }
    }
  }
}
.task-list {
  padding: 20px 8px;
  text-align: center;
  color: #444;

  .task-item {
    padding: 10px 0;
    border: 1px solid #1989fa;
    border-radius: 6px;
    margin: 16px 0;
    background: #FCFCFC;
    color: #1989fa;

    &.done {
      background: #1989fa;
      color: #f7f7f7;
    }
    &.disabled {
      background: #EEE;
      color: #777;
      border-color: #ccc;
    }
  }
}
</style>